<template>
    <div class="container">
        <h2>{{ data.title }}</h2>
        <!-- 使用 v-html 解析 htmlContent 字符串为 HTML -->
        <div v-html=data.content></div>
        <div class="image">
            <img v-for="(url, index) in data.imgUrl" :key="index" :src="url" alt="Image" />
        </div>
    </div>

</template>
<script setup>
import { readReport } from "@/api/classReport/readReport"
import { ref } from "vue";
const data = ref({})
function getClassScore() {
    readReport('readReport').then(res => {
        if (res.code == 200) {
            data.value = {
                content: res.data.content,
                imgUrl: res.data.imgUrl.split(','),
                title: res.data.title
            }
        }
    })
}

getClassScore()
</script>

<style scoped>
.container {
    margin: 20px;
}

.container h2 {
    text-align: center;
}

.image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image img{
    width: 400px;
    margin-top: 20px;
}
</style>